<template>
  <div>
    <el-tiptap :extensions="extensions" v-model="content" placeholder="Write something ..." />
    <el-button @click="getValue">获取值</el-button>
  </div>
</template>

<script>
import {
  Doc,
  Text,
  Paragraph,
  Heading,
  Bold,
  Underline,
  Strike,
  Italic,
  TextAlign,
  // Image,
  ListItem,
  BulletList,
  OrderedList,
  TodoItem,
  TodoList,
  Indent,
  TextColor,
  TextHighlight,
  Preview,
  CodeBlock,
  Fullscreen,
} from "element-tiptap";

import "codemirror/addon/selection/active-line.js"; // require active-line.js
import "codemirror/addon/edit/closetag.js"; // autoCloseTags

export default {
  name: "Editor",

  data: () => ({
    extensions: [
      new Doc(),
      new Text(),
      new Paragraph(),
      new Heading({ level: 3 }),
      new Bold({ bubble: true }), // 在气泡菜单中渲染菜单按钮
      // new Image({
      //   // 默认会把图片生成 base64 字符串和内容存储在一起，如果需要自定义图片上传
      //   uploadRequest (file) {
      //     // 如果接口要求 Content-Type 是 multipart/form-data，则请求体必须使用 FormData
      //     const fd = new FormData()
      //     fd.append('image', file)
      //     // 第1个 return 是返回 Promise 对象
      //     // 为什么？因为 axios 本身就是返回 Promise 对象
      //     return uploadImage(fd).then(res => {
      //       // 这个 return 是返回最后的结果
      //       return res.data.data.url
      //     })
      //   } // 图片的上传方法，返回一个 Promise<url>
      // }),
      new Underline(), // 下划线
      new Strike(), // 删除线
      new Italic(), // 斜体
      new TextAlign(), // 文字排列方式
      new ListItem(),
      new BulletList(), // 无序列表
      new OrderedList(), // 有序列表
      new TodoItem(),
      new TodoList(),
      new Indent(), // 增缩进
      new TextColor(),
      new TextHighlight(),
      new Preview(),
      new CodeBlock(),
      new Fullscreen(),
    ],

    content: `111`,
  }),
  methods: {
    getValue() {
      console.log(this.content);
    },
  },
};
</script>
